<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <label style="margin-right: 5px">管理员：</label>
        <el-input v-model="name" placeholder="请输入管理员姓名" style="width: 15%" clearable @clear="getAdminPage"
          @keyup.enter="getAdminPage" />
        <el-button type="primary" style="margin-left: 10px" @click="getAdminPage">查询</el-button>
        <div style="float: right">
          <el-button type="primary" @click="adminHandle"> 添加管理员 </el-button>
        </div>
      </div>
    </template>
    <el-table :data="admins" style="width: 100%">
      <el-table-column prop="name" label="员工姓名" />
      <el-table-column prop="username" label="账号" />
      <el-table-column label="账号状态">
        <template #default="{ row }">
          <div class="status" :class="{ 'stop-status': row.status === 0 }">
            {{ row.status === 0 ? '禁用' : '启用' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="操作时间" />
      <el-table-column label="操作" width="160" align="center">
        <template #default="{ row }">
          <el-button size="small" :disabled="row.username === 'admin'" @click="adminHandle(row)"> 修改 </el-button>
          <el-button :disabled="row.username === 'admin'" :type="row.status == 1 ? 'danger' : 'success'" size="small"
            @click="statusHandle(row)">
            {{ row.status == 1 ? '禁用' : '启用' }}
          </el-button>
        </template>
      </el-table-column>
       <template #empty>
         <el-empty />
      </template>
    </el-table>
    <template #footer>
      <!-- 分页条 -->
      <Pagination :page="page" :pageSize="pageSize" :total="total" @onSizeChange="onSizeChange"
        @onPageChange="onPageChange" />
    </template>
  </el-card>
</template>
<script setup lang="ts">
import Pagination from '@/components/Pagination/index.vue'
import { EmployeeResult } from '@/types/employee'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getAdminPageAPI, postAdminStatusAPI } from '@/api/admin/admin'
import { AdminResult } from '@/types/admin'
// 姓名
const name = ref('')
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 员工列表
const admins = ref<AdminResult[]>([])

// 员工分页查询
const getAdminPage = async () => {
  let pageParams = {
    page: page.value,
    pageSize: pageSize.value,
    name: name.value ? name.value : undefined,
  }
  try {
    const { data } = await getAdminPageAPI(pageParams)
    admins.value = data.records
    total.value = data.total
  } catch (error) {
    console.log(error)
  }
}
onMounted(async () => {
  await getAdminPage()
})
//当每页条数发生了变化，调用此函数
const onSizeChange = (num: number) => {
  pageSize.value = num
  getAdminPage()
}
//当前页码发生变化，调用此函数
const onPageChange = (num: number) => {
  page.value = num
  getAdminPage()
}
// 启用、禁用员工账号
const statusHandle = (row: EmployeeResult) => {
  if (row.username === 'admin') return
  const id = row.id
  const status = row.status

  ElMessageBox.confirm('确认要执行此操作吗?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await postAdminStatusAPI(!status ? 1 : 0, id)
    getAdminPage()
    ElMessage.success({
      type: 'success',
      message: '修改状态成功',
    })
  })
}
const router = useRouter()
// 添加/修改管理员信息
const adminHandle = (row: AdminResult) => {
  if (!row) {
    router.push('/admin/detail')
  } else {
    router.push({ path: '/admin/detail', query: { id: row.id } })
  }
}
</script>
<style scoped lang="scss"></style>
